<template>
  <div>
    <el-form ref="searchform" :model="search" inline style="margin-top: 20px;">
      <el-form-item label="生产线名称" label-width="110px">
        <el-input placeholder="请输入生产线名称" v-model='search.productLineName'></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="cx">查询</el-button>
        <el-button type="primary" @click="cz">重置</el-button>
        <el-button type="primary" @click="addxs=true">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" align="center"></el-table-column>
      <el-table-column prop="processName" label="产品" width="380" align="center"></el-table-column>
      <el-table-column prop="productLineName" label="生产线名称" width="380" align="center"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="xg(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="sc(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible='xgxs' title="修改工厂建模" width="30%">
      <el-form ref="xgform" :model="xgform" :rules="rule">
        <el-form-item label="生产线名称" label-width="100px" prop="name">
          <el-input placeholder="请输入生产线名称" v-model="xgform.productLineName"></el-input>
        </el-form-item>
        <el-form-item label="产品" label-width="100px" prop="processName">
          <el-input placeholder="请输入产品" v-model="xgform.processName"></el-input>
        </el-form-item>
        <el-form-item label="产品型号" label-width="100px" prop="leader">
          <el-input placeholder="A14A526" disabled></el-input>
        </el-form-item>
        <el-form-item label="产品规格" label-width="100px" prop="leader">
          <el-input placeholder="A14A526"  disabled></el-input>
        </el-form-item>
        <el-form-item label="描述" label-width="100px" prop="name">
          <el-input placeholder="请输入生产线名称" v-model="xgform.name"></el-input>
        </el-form-item>
        <el-form-item label="选择" label-width="100px">
          <el-button type="primary" @click="xzxs=false">选择</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="xgqx()">取 消</el-button>
        <el-button type="primary" @click="xgqd()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible='addxs' title="添加工厂建模"  width="30%">
      <el-form ref="addform" :model="addform" :rules="rule">
        <el-form-item label="生产线名称" label-width="100px" prop="productLineName">
          <el-input placeholder="请输入生产线名称" v-model="addform.productLineName"></el-input>
        </el-form-item>
        <el-form-item label="产品" label-width="100px" prop="processName">
          <el-input placeholder="请输入产品" v-model="addform.processName"></el-input>
        </el-form-item>
        <el-form-item label="产品型号" label-width="100px">
          <el-input v-model="addform.cpxh" disabled></el-input>
        </el-form-item>
        <el-form-item label="产品规格" label-width="100px">
          <el-input v-model="addform.cpgg" disabled></el-input>
        </el-form-item>
        <el-form-item label="描述" label-width="100px" prop="miaoshu">
          <el-input placeholder="请输入生产线名称" v-model="addform.miaoshu"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addqx()">取 消</el-button>
        <el-button type="primary" @click="addqd()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible='xzxs' title="选择物料档案" width="30%">
      <
      <span slot="footer" class="dialog-footer">
        <el-button @click="addqx()">取 消</el-button>
        <el-button type="primary" @click="addqd()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listAll,
    rw3delete
  } from '@/api/rw.js'
import { rw3add, rw3list, updateone } from '../../api/rw.js';
  export default {
    data() {
      return {
        tableData: [],
        rule: {
          productLineName: [{
            required: true,
            message: '不能为空'
          }],
          processName: [{
            required: true,
            message: '不能为空'
          }],
          cpxh: [{
            required: true,
            message: '不能为空'
          }],
          cpgg: [{
            required: true,
            message: '不能为空'
          }]
        },
        xgxs: false,
        xgform: {},
        search: {},
        addform:{},
        addxs:false,
        xzxs:false
      }
    },
    methods: {
      async select(data) {
        let r = await rw3list(data)
        console.log(r);
        this.tableData = r.data.reverse()
      },
      async xg(i) {
        this.xgform = i
        this.xgxs = true
      },
      async sc(i) {
        let r = await rw3delete({
          id: parseInt(i.id)
        })
        this.select()
        this.$message({
          message: r.msg,
          type: 'success'
        })
      },
      xgqx() {
        this.xgxs = false
        this.$refs['xgform'].resetFields();
      },
      xgqd() {
        this.$refs['xgform'].validate(async (a) => {
          if (a) {
            let r = await updateone(this.xgform)
            console.log(r);
            this.select()
            this.xgxs = false
          }
        })
      },
      addqx(){
        this.addxs = false
        this.$refs['addform'].resetFields();
      },
      addqd(){
        this.$refs['addform'].validate(async (a) => {
          if (a) {
            let r = await rw3add(this.addform)
            console.log(r);
            this.select()
            this.addform = {}
            this.addxs = false
            console.log(r);
          }
        })
      },
      cx(){
        this.select(this.search)
      },
      cz(){
        this.search = {}
        this.select()
      }
    },
    async mounted() {
      this.select()
    }
  }
</script>

<style>
</style>
